<template>
	<view class="container">
		<!-- 顶部 banner -->

		<view class="swiper-banner-container">
			<swiper class="swiper-banner" :display-multiple-items=" bannerList.length>2?2: bannerList.length">
				<swiper-item v-for="item in bannerList" :key="item">
					<view class="img-bg" :style="{ backgroundImage: 'url(' + $wanlshop.oss(item, 88, 88) + ')' }">
					</view>
				</swiper-item>
			</swiper>

			<!-- 评分 -->
			<view class="score-card">
				<view class="card">
					<text>{{ details.grade }}<span
							style="margin-left: 8rpx; font-size: 20rpx;color:#fd8c00;">分</span></text>
					<wanl-rate :size="8" :quantity="5" :disabled="true" class="wanl-rate"></wanl-rate>
				</view>

				<view class="content">
					<!-- <text>近期有{{ details.good_comment_users }}位用户给了好评</text> -->
					<swiper class="w100P h100P" autoplay circular interval="3000">
						<swiper-item v-for="(item, index) in announcement" :key="index">
							<view class="w100P h100P flex flex-middle">{{ item.value }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="section shop-info"
			:style="{ background: `url(${$wanlshop.oss(bgImG)})`,backgroundSize: '100% 100%'}">
			<view class="shop-title">
				<text>{{ details.store_name }}</text>
				<view class="tag">洗护店</view>
			</view>

			<view class="list">
				<view class="">服务范围</view>
				<text>{{ lableWidth }}</text>
			</view>
			<view class="list">
				<view class="">营业时间</view>
				<text>{{ details.start_time }}-{{ details.end_time }}</text>
			</view>

			<view class="location">
				<view class="left">
					<view class="addr">{{ details.address }}</view>
					<view class="distance">距离你 {{$wanlshop.setMorKm(details.distance) }}</view>
				</view>

				<view class="right">
					<view class="flex flex-middle"
						@tap="$wanlshop.to(`./select_shop_map?name=${details.store_name}&addr=${details.address}&latitude=${details.latitude}&longitude=${details.longitude}`)">
						<image src="/static/images/service/navigation.png" mode="aspectFit"></image>
						<text>导航</text>
					</view>
					<view class="flex flex-middle" @tap="$wanlshop.phone( details.store_phone )">
						<image src="/static/images/service/phone.png" mode="aspectFit"></image>
						<text>电话</text>
					</view>
				</view>
			</view>

		</view>

		<!-- 门店技师 -->
		<view class="section technician" @click="onClick()">
			<view class="section-title">门店技师</view>

			<view class="swiper-technician">
				<view v-for="(item,key) in storeTechnician" :key="key">
					<view class="swiper-item">
						<image src="/static/images/service/champion.png" mode="" class="av-icons" v-if="key == 0">
						</image>
						<image src="/static/images/service/runnerUp.png" mode="" class="av-icons" v-if="key == 1">
						</image>
						<image src="/static/images/service/second.png" mode="" class="av-icons" v-if="key == 2"></image>
						<view class="img-bg avatar"
							:style="{ background: `url(${$wanlshop.oss(`${ item.avatar_img }`)})`}"></view>
						<view class="info">
							<view class="name">{{ item.name }}</view>
							<text class="tag" v-if="item.level">
								{{item.level == 4 ? '高级技师' : item.level == 3 ? '中级技师' : item.level == 2 ? '初级技师' : '见习技师'}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 门店评价 -->
		<view class="section comment" @tap="$wanlshop.to(`./select_shop_comment?ids=${ this.storeComments_id }`)">
			<view class="section-title flex justify-between align-center"><text>门店评价</text><text
					style="font-size: 24rpx; color: #868686;">{{ shopTotal }}条真实评价</text>
			</view>

			<view class="comment-header">
				<view class="score">
					<view style="text-align: center;white-space: nowrap;">
						<span style="color:#fd8c00;">{{ details.grade }}</span><span
							style="font-size: 28rpx;color:#fd8c00;">分</span>
					</view>
					<wanl-rate :size="10" :current="5" :disabled="true"></wanl-rate>
				</view>
				<view class="line"></view>

				<scroll-view class="list" scroll-x="true">
					<view class="item">
						<view class="label">服务态度</view>
						<text>{{ wanlshopObj[0].score_attitude || 0 }}</text>
					</view>
					<view class="item">
						<view class="label">技术能力</view>
						<text>{{ wanlshopObj[0].score_skill || 0 }}</text>
					</view>
					<view class="item">
						<view class="label">店面环境</view>
						<text>{{ wanlshopObj[0].score_environment || 0 }}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 获取一个评论 -->
			<view class="user" v-for="(item, index) in wanlshopObj" :key="item.id" @tap="onTag('')">
				<view class="userinfo flex justify-between" style="margin-bottom: 8rpx;">
					<view class="avatar flex">
						<view class="cu-avatar round margin-right-sm"
							:style="{ backgroundImage: 'url(' + item.user.avatar + ')' }">
						</view>
						<view class="text-sm">
							<view>{{ item.user.nickname }}</view>
							<wanl-rate :size="9" :current="item.score" :disabled="true" />
						</view>
					</view>
					<!-- <view class="text-gray" style="font-size: 22rpx;">{{ $wanlshop.timeToDate(item.createtime) }}</view> -->
				</view>

				<view class="details text-min">
					<!-- class="margin-bottom-sm" -->
					<view style="margin-bottom: 8rpx;">{{ item.content }}</view>
					<view class="wanl-gray" style="margin-bottom: 8rpx;">购买：{{ item.suk }}</view>
				</view>

				<view class="grid flex-sub grid-square" v-if="item.images.length"
					:class="[item.images.length > 3 ? 'col-3' : 'col-2']">
					<view class="bg-img" style="margin-bottom: unset;" v-for="(image, index) in item.images"
						:key="index" v-if="index <= 3"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 88, 88) + ')' }"></view>
				</view>
			</view>
		</view>

		<view class="more" @tap="$wanlshop.to(`./select_shop_comment?ids=${ this.storeComments_id }`)">
			<text class="wlIcon-fanhui2 margin-left-xs"></text>
			<view>查看更多评论（ {{ shopTotal }} 条）</view>
		</view>

		<view class="footer" v-if="showSwitch != 'true'">
			<view class="confirm" @tap="confirm">
				选择此门店
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgBase: "",
				showSwitch: '',
				bannerList: [],
				details: {},
				lableWidth: '',
				// 当前位置坐标
				cur_latitude: null,
				cur_longitude: null,
				// 门店位置坐标
				shop_latitude: 22.940324,
				shop_longitude: 113.34878,
				distance: '0m',
				storeTechnician: [],
				wanlshopObj: [],
				shopTotal: "",
				storeComments_id: "",
				bgImG: "",
				announcement: [] // '[{"value":"11111"},{"value":"22222"}]'
			};
		},
		onLoad(option) {
			this.showSwitch = option.showSwitch
			if (!option.id) {
				this.$wanlshop.msg('非法访问');
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index'
					})
				}, 1000);
				return;
			}

			this.storeComments_id = option.id

			// 获取技师列表
			this.getList(option);
			this.getDetail(option);
			this.getStoreComments(option);

			this.getLoad();
		},
		methods: {
			getLoad() {
				this.$api.post({
					url: `/wanlshop/product/hotsale?page=${1}`,
					success: res => {
						// console.log(res,'sssssssss')
						res.data.forEach((e, i) => {
							if (e.row == "地图背景") {
								this.bgImG = e.img_url
							}
						})
					}
				})
			},
			confirm() {
				uni.setStorageSync('store_details', this.details)
				uni.navigateBack({ //返回
					delta: 2
				})
			},
			onClick() {
				this.$wanlshop.to(`/pages/service/technician/list?type=goods&ids=${this.storeComments_id}`);

			},
			getStoreComments(option) {
				let storeComments_id = this.storeComments_id
				this.$api.get({
					url: '/wanlshop/store/storeComments',
					data: {
						store_id: storeComments_id
					},
					success: res => {
						console.log(option, '刚刚加的  option')
						if (res.data[0]) {
							this.wanlshopObj = [res.data[0]]
						}
						this.shopTotal = res.total
					}
				});
			},
			getList(option) {
				this.$api.get({
					url: '/wanlshop/store/staff?store_id=' + option.id,
					success: res => {
						console.log(res, '获取数据源')
						this.storeTechnician = res
					}
				});
			},
			async getDetail(option) {
				const res = await this.$wanlshop.location();
				if (res.code == 1) {
					let loc = res.data.address.streetNumber.location.split(',');
					console.log('loaction', loc)
					this.$api.get({
						url: '/wanlshop/store/detail',
						data: {
							id: option.id,
							longitude: loc[0],
							latitude: loc[1]
						},
						success: res => {
							this.lableWidth = res.store_services.map(item => item.name).join(',')
							this.bannerList = res.store_photo.split(',')
							this.details = res
							this.announcement = []
							if (res.announcement) {
								// 指不定后端会改回正确的数据类型，先做兼容吧，懒得和他们说了
								if (Object.prototype.toString.call(res.announcement) ===
									'[object Array]') {
									this.announcement = res.announcement
								} else if (Object.prototype.toString.call(res.announcement) ===
									'[object String]') {
									this.announcement = JSON.parse(res.announcement)
								}
							}
						}
					});
				}
			},
			// 获取当前位置
			async getLocation() {
				let res = await this.$wanlshop.location();
				if (res.code === 1) {
					res = res.data;
					// 取出坐标点
					// console.log('res', res)
					let arr = res.address.streetNumber.location.split(',');
					this.cur_longitude = arr[0];
					this.cur_latitude = arr[1];
					// 获取路线规划
					this.getDriverLine();
				}
			},
			// 路线规划，调用高德地图的api实现规划路线的功能。
			getDriverLine() {
				const that = this;
				//这个key是在高德导航app上申请的web路线规划
				const key = this.$wanlshop.config('amapkey');
				//起点坐标
				const origin = [this.cur_longitude, this.cur_latitude].join(',');
				//终点坐标
				const destination = [this.shop_longitude, this.shop_latitude].join(',');
				// 驾车选择策略 - 距离优先
				const strategy = 2;
				//给起点坐标一个图标
				// this.startingPoint()
				//给终点坐标一个图标
				// this.endPoint()
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&strategy=${strategy}&key=${key}&nosteps=1`,
					success: (res) => {
						console.log('路线规划', res);
						const data = res.data.route;

						if (data.paths && data.paths[0]) {
							that.distance = that.$wanlshop.setMorKm(data.paths[0].distance);
						}
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6efe9;
		padding: 14rpx 18rpx;
		box-sizing: border-box;
	}

	.container {
		background-color: #f6efe9;
	}

	.swiper-banner-container {
		background-color: white;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
		border-radius: 32rpx;
		padding: 20rpx 22rpx;
		margin-bottom: 10rpx;
	}

	.swiper-banner {
		// border: 1px solid red;
		margin-bottom: 10rpx;
		height: 200rpx;

		swiper-item {
			overflow: hidden;
			display: flex;
			justify-content: center;

			.img-bg {
				width: 98%;
				height: 100%;
				background-size: cover !important;
				background-position: center;
				border-radius: 16rpx;
			}
		}
	}

	.score-card {
		width: 100%;
		height: 68rpx;
		display: flex;

		.wanl-rate-box {
			transform: translateY(-8px) !important;
		}

		.card {
			position: relative;
			width: fit-content;
			height: 100%;
			background-color: pink;
			border-radius: 16rpx 0rpx 0 16rpx;
			clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
			display: flex;
			flex-direction: column;
			padding-left: 12rpx;
			padding-right: 30rpx;
			font-size: 32rpx;
			color: white;
			background-color: #FD8C00;
			width: 112rpx;
			text-align: center;

			.wanl-rate {
				position: absolute;
				bottom: -6px;
			}
		}

		.content {
			margin-left: -3%;
			padding-left: calc(3% + 10rpx);
			padding-right: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			font-size: 22rpx;
			flex: 0.5;
			background: linear-gradient(90deg, #FECC8A 2%, rgba(254, 204, 138, 0) 100%);

			image {
				width: 30rpx;
				height: 26rpx;
			}

			.mark-right {
				transform: rotateZ(180deg) translateY(-10rpx);
			}

			.mark-left {
				transform: translateY(-10rpx);
			}
		}
	}

	.section {
		background-color: white;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
		border-radius: 32rpx;
		padding: 20rpx 22rpx;
		margin-bottom: 10rpx;

		.section-title {
			font-size: 30rpx;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 24rpx;


		}
	}

	.shop-info {
		position: relative;

		.shop-title {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 18rpx;

			.tag {
				width: fit-content;
				height: fit-content;
				border-radius: 8rpx;
				background-color: #FD7601;
				font-size: 18rpx;
				color: white;
				padding: 4rpx;
			}

			text {
				font-size: 32rpx;
			}

		}

		.list {
			display: flex;
			align-items: center;
			gap: 30rpx;
			font-size: 22rpx;
			margin-bottom: 18rpx;
		}

		.location {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.left {
				font-size: 22rpx;

				.addr {
					margin-bottom: 18rpx;
				}

				.distance {
					color: #4C4C4C;
				}
			}

			.right {
				display: flex;
				gap: 38rpx;
				font-size: 22rpx;
				padding-right: 20rpx;

				view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 10rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}
				}
			}

		}

		.map {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 220rpx;
			height: 146rpx;
			z-index: 0;
		}
	}

	.technician {

		.swiper-technician {
			// height: 96rpx;
			display: flex;
			overflow-x: auto;
			gap: 20rpx;

			.swiper-item {
				// border: 2rpx solid #F7F7F7;
				border-radius: 326rpx;
				padding: 12rpx 20rpx;
				display: flex;
				align-items: center;
				gap: 14rpx;
				width: 210rpx;
				background: #F7F7F7;
				position: relative;

				.av-icons {
					position: absolute;
					left: 0;
					margin: 0 auto;
					width: 35rpx;
					height: 28rpx;
				}

				.avatar {
					width: 64rpx;
					height: 64rpx;
					background-size: cover !important;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.info {
					.name {
						font-size: 24rpx;
						margin-bottom: 8rpx;
					}

					.tag {
						font-size: 18rpx;
						color: #FD7601;
						border: 2rpx solid #FD7601;
						padding: 0 4rpx;
						border-radius: 6rpx;
						background: #FFF3E5;
					}
				}
			}
		}

	}

	.comment {
		margin-bottom: 30rpx;

		.comment-header {
			background-color: #f6efe9;
			border-radius: 16rpx;
			padding: 30rpx;
			margin: 0 18rpx;
			display: flex;
			align-items: center;
			gap: 40rpx;
			margin-bottom: 30rpx;

			.score {
				font-size: 22rpx;
				color: #FF4646;

				span {
					font-size: 38rpx;
				}
			}

			.line {
				width: 2rpx;
				height: 50rpx;
				background-color: #D8D8D8;
				// margin-right: 40rpx;
			}

			.list {
				white-space: nowrap;
				width: 100%;

				.item {
					display: inline-block;
					font-size: 24rpx;
					margin-right: 32rpx;
					// background-color: pink;
					text-align: center;

					text {
						margin-top: 14rpx;
						display: block;
					}
				}
			}
		}

		.user {
			margin: 0 22rpx;
		}
	}

	.more {
		color: #898989;
		font-size: 24rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 150rpx;

		text {
			transform: rotateZ(90deg);
		}
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		height: 150rpx;

		.confirm {
			width: 90%;
			text-align: center;
			background-color: #fd8d00;
			border-radius: 1000rpx;
			height: 80rpx;
			color: #ffffff;
			font-size: 28rpx;
			line-height: 80rpx;
		}
	}
</style>